<template>
  <div>
    <img v-lazy="'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.55506.net%2Fd%2Ffile%2F20180504%2F66-1P504163008-50.jpg&refer=http%3A%2F%2Fwww.55506.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663905565&t=9045cee10b45c98f8c365932e3ede10a'"  alt="">
  </div>
</template>

<script setup lang="ts">
// import { useIntersectionObserver } from '@vueuse/core'
// import { ref } from 'vue';
// const img = document.createElement('img')
// const target = ref<null | HTMLImageElement>(null)
// const obj = { name: 'zs' }
// const { name: name2 } = obj
// const arr = ['ls']
// const [ username ] = arr
// const imgUrl = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.55506.net%2Fd%2Ffile%2F20180504%2F66-1P504163008-50.jpg&refer=http%3A%2F%2Fwww.55506.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663905565&t=9045cee10b45c98f8c365932e3ede10a'

// useIntersectionObserver(target, ([{ isIntersecting }]) => {
//   // console.log(result, element)
//   console.log(isIntersecting)
//   // 请问: 怎么使用 useIntersectionObserver 做懒加载?
//   if (isIntersecting) {
//     // if (target.value) {
//     //   target.value.src = imgUrl
//     // }
//     // ?. 可选链操作符, 只能用于获取数据, 不能用于设置属性
//     // !. 非空断言, 我断定你一定不是空的, 强行消除 ts 的报错, 一般用于赋值
//     target.value!.src = imgUrl
//   }
// })

// 代码的可读性, 不要过分的追求机制精简而放弃代码的可读性
// 错误示范:
// useIntersectionObserver(target, ([{ isIntersecting }]) => (isIntersecting && (target.value!.src = imgUrl)))

</script>

<style scoped>
div {
  height: 5000px;
}
img {
  margin-top: 2000px;
}
</style>